<template>
  <el-dialog v-model="visible"
             title="选择图标"
             width="410px"
             header-class="border-b"
             body-class="px-0 pt-4 pb-4"
             footer-class="border-t">
    <el-space wrap>
      <div v-for="i in APP_ICONS" :key="i" class="cursor-pointer" @click="onSelect(i)">
        <svg class="icon h-10 w-10" style="" aria-hidden="true">
          <use :href="'#'+i"></use>
        </svg>
      </div>
    </el-space>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="visible=false">关闭</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive, nextTick, onBeforeUnmount, defineEmits} from 'vue'
import {useRouter} from 'vue-router';
import defaultLogo from "@/assets/images/default-logo.png";
import defaultAvatar from "@/assets/images/default-avatar.jpg";
import {$localStorage} from "@/utils/application-storage.js";
import $apiService from "@/axios/api.js";
import {arrayToElTreeSelectData} from "@/utils/misc.js";


/////////////////////////////////   私有变量定义    //////////////////////////
const $router = useRouter();
const visible = ref(false);
const emits = defineEmits(['update:icon']);
// const tenantInfo = ref({
//   id: "",
//   logo: defaultLogo,
//   tenantCode: '',
//   systemName: ''
// })
// const myProfile = ref({
//   avatarUrl: defaultAvatar,
//   realName: ''
// })
// const curApplication = ref({
//   id: '',
// })
// const dialogForm = ref({})
// const formOrViewList = ref([])
// const workflowList = ref([])
// const menuTree = ref([])

// const dialogFormRules = ref({
//   name: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
//   code: [{required: true, message: '请输入菜单编码', trigger: 'blur'}],
//   status: [{required: true, message: '请选择菜单状态', trigger: 'change'}],
//   openMode: [{required: true, message: '请选择打开方式', trigger: 'change'}],
// })

const APP_ICONS = [
  "icon-setting-fill",
  "icon-routine",
  "icon-my-work",
  "icon-chaosongwode2",
  "icon-jianshi2",
  "icon-jingjiyunhang",
  "icon-wofaqide1",
  "icon-shebeishouce",
  "icon-zhihuijingying",
  "icon-liuchengguanli",
  "icon-huabanbeifen7",
  "icon-chalvbaoxiao",
  "icon-chuchabaoxiao",
  "icon-shiqianshenpi",
  "icon-wochulide",
  "icon-feiyongbaoxiao",
  "icon-wodedaiban",
  "icon-xiangmubaojia",
  "icon-chaosongwode",
  "icon-zhuanzhangzhifu",
  // "",
]
let theSelectedIcon = ""
/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  // tenantInfo.value = $localStorage.getTenantInfo()
  // myProfile.value = $localStorage.getMyProfile()
  // curApplication.value = $localStorage.getCurApplicationInfo()
  // getMenuAsTree()
});
onBeforeUnmount(() => {
})
onUnmounted(() => {
});
/////////////////////////////////   页面方法    //////////////////////////
const show = async () => {
  theSelectedIcon = ""
  visible.value = true
  // await nextTick();
}
const onSave = () => {
  visible.value = false
  emits('update:icon', theSelectedIcon);
}
const onSelect = (icon) => {
  theSelectedIcon = icon
  visible.value = false
  emits('update:icon', icon);
}

const ddd = () => {
}


/////////////////////////////////   暴露内部方法，让父组件可以访问    //////////////////////////
defineExpose({
  show
});
</script>

<style scoped>

:deep(.el-tabs__content) {
  padding: 0;
}
</style>
